import UserSession from "@/UserSession";
import { Button, Col, Form, Row, Input, Icon, message } from "antd";
import React from "react";
import styles from "../index.less"
import { formEdit, formFlowTemplate, formInfo, formPush } from "@/services/formInteraction";
import MoveCategory from "./moveCategory";
import FormFlow from "./formFlow";
import CardConfig from "./cardConfig";
import RightDrawer from "./rightDrawer";
import { saveGraph } from './saveGraph';

class Flow extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      editName:false,
      name:"",
      showClassModal:false,
      formId:"",
      categoryId:"",
      flowData:{
        nodes: [],
			  edges: [],
      },
      pushTime:""
    }
  }

  componentDidMount(){
    this.getInfo()
    this.getTemplates()
  }

  getInfo = async () => {
    const { location: { query: { id }, } } = this.props
    const res = await formInfo({id})
    this.setState({
      formId:res.id,
      name:res.name,
      categoryId:res.categoryId,
      pushTime:res.pushTime
    })
  }

  getTemplates = async () => {
    const { location: { query: { id }, } } = this.props
    const res = await formFlowTemplate({id})
    this.setState({
      flowData:res.data
    },() => {
      this.FormFlow.judgeDataSource()
    })
  }

  fixName = (e) => {
		if (e.target.value.length > 20) {
			return message.info("名称不能超过20个字符");
		};
		this.setState({ name: e.target.value, });
	};

  checkName = async () => {
		const { name,formId,categoryId } = this.state;
		if (name.length > 20) {
			return message.info("名称不能超过20个字");
		};
    const res = await formEdit({
      name:name,
      id:formId,
      categoryId
    })
		this.setState({ editName: false, }, () => {
      message.info(res.message);
      this.getInfo()
    });
	};

  openMoveModal = () => {
    this.MoveCategory.initModal()
  }

  opRightDrawer = (node) => {
    this.RightDrawer.initModal(node)
  }

  refreshTemplate = () => {
    this.getTemplates()
  }

  doSaveTemplate = () => {
    const flag = saveGraph();
    if(flag){
      message.info("操作成功")
    }
  }

  doPush = async () => {
    const { formId } = this.state;
    const res = await formPush({id:formId})
    if(res.code == -1){

    }else{
     message.info(res.message)
    }
  }

  render(){
    const { editName,name,categoryId,formId,flowData,pushTime } = this.state;
    const { form:{getFieldDecorator},match: { params: { id } },location:{pathname,query} } = this.props;
    return (
      <div>
        {
          // <Row style={{paddingBottom:10,borderBottom:'1px solid #e8e8e8'}}>
          //   <Col span={12}>
          //     {
          //       editName ? (
          //         <Form layout={"inline"}>
          //           <Form.Item label={"名称"}>
          //             {getFieldDecorator("name", {
          //               rules: [
          //                 { required: true, message: "请输入名称", },
          //               ],
          //               initialValue: name,
          //             })(
          //               <Input placeholder='请输入名称' onChange={(e) => this.fixName(e)} />
          //             )}
          //           </Form.Item>
          //           <Form.Item>
          //             <Button type='primary' size='small' onClick={() => this.checkName()}>保存</Button>
          //           </Form.Item>
          //           <Form.Item>
          //             <Button size='small' onClick={() => this.setState({ editName: false })}>取消</Button>
          //           </Form.Item>
          //         </Form>
          //       ) : (
          //         <div className={styles.title} style={{ padding: 0 }}>
          //           <span>
          //             {name}
          //             {/* 系统知识库不显示编辑名称 */}
          //             {
          //               !UserSession.isSystemKnowledge() && (
          //                 <Icon
          //                   type={"form"}
          //                   style={{ marginLeft: 10 }}
          //                   onClick={() => this.setState({ editName: true })}
          //                 />
          //               )
          //             }

          //             {/* 系统知识库不显示移动分类 */}
          //             {!UserSession.isSystemKnowledge() && (
          //               <Icon
          //                 type='unordered-list'
          //                 style={{ marginLeft: 10, cursor: "pointer" }}
          //                 onClick={this.openMoveModal}
          //               />
          //             )}
          //           </span>
          //         </div>
          //       )
          //     }
          //   </Col>
          //   <Col span={12} style={{textAlign:'right'}}>
          //     <Button style={{marginRight:8}} onClick={this.doPush} disabled={UserSession.isSystemKnowledge()}>发布</Button>
          //     <Button type="primary" style={{marginRight:8}} onClick={this.doSaveTemplate} disabled={UserSession.isSystemKnowledge()}>保存</Button>
          //   </Col>
          // </Row>
        }
        <Row>
          <Col span={24}>
            <FormFlow 
              onRef={ref => this.FormFlow = ref} 
              flowData={flowData} 
              opRightDrawer={this.opRightDrawer} 
              doPush={this.doPush}
              doSaveTemplate={this.doSaveTemplate}
              pathInfo={{pathname,id,query}}
              name={name}
              formId={formId}
              refreshName={this.getInfo}
              openMoveClass={this.openMoveModal}
              categoryId={categoryId}
              pushTime={pushTime}
            />
          </Col>
        </Row>

        <MoveCategory 
          onRef={ref => this.MoveCategory = ref} 
          rootCategoryId={id}
          name={name}
          categoryId={categoryId}
          formId={formId}
          getInfo={this.getInfo}
        />

        <CardConfig />
        <RightDrawer onRef={ref => this.RightDrawer = ref} formId={formId} refreshTemplate={this.refreshTemplate} />
      </div>
    )
  }
}

export default Form.create()(Flow)